<script setup>
import { useRoute , RouterLink } from 'vue-router'
import { getData } from '@/api'
import { reactive, ref, nextTick } from 'vue'
const path = Object.entries(useRoute().params)[0].join('=')
const data = ref({})
getData(useRoute().params,'film.info').then(res=>{
  data.value= res.data.data.film
  // console.log(data.value)
})
const isfold = ref(true)
</script>

<template>
  <div class="app">
    <header>
      <a href="/" class="back"><</a>
    </header>
    <main>
      <div class="film_poster">
        <img :src="data?.poster">
      </div>
      <div class="film_details">
        <p><b>{{ data?.name }}</b><span class="filmType">{{ data.filmType?.name }}</span><span class="grade">{{ data?.grade }}</span></p>
        <p><span>{{ data?.category }}</span></p>
        <p>{{ new Date( data.premiereAt*1000 ).toLocaleDateString().replace(/\//g,'-')+'上映' }}</p>
        <p>{{ data.nation }} | {{ data.runtime }}分钟</p>
        <p class="synopsis" :class="{'fold':isfold}">{{ data.synopsis }}</p>
        <p @click="isfold=!isfold" class="btn_fold">折叠</p>
      </div>
      <div class="film_actors">
        <p class="actor_title">演职人员</p>
        <ul>
          <li v-for="item in data.actors" :key="item">
            <div>
              <img :src="item.avatarAddress" >
            </div>
            <p>{{ item.name }}</p>
            <span>{{ item.role }}</span>
          </li>
        </ul>
      </div>
      <div class="photos">
        <p><b>剧照</b><span  @click="$router.push({name:'photos', params: { filmId :data.filmId}})">全部&gt;</span></p>
        <ol>
          <li v-for="item in data.photos?.slice(0,4)">
            <div>
              <img :src="item">
            </div>
          </li>
        </ol>
      </div>
    </main>
    <footer>选座购票</footer>
  </div>
</template>

<style lang="scss" scoped>
.app{
  width: 100vw;
  height: 100vh;
  font-size: .16rem;
  display: flex;
  flex-direction: column;
  background-color:#F4F4F4;
  header{
    height: .44rem;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    a{
      position: fixed;
      display: block;
      font-size: 0.24rem;
      transform: scale(0.8, 1.4);
      z-index: 2;
      width: 0.375rem;
      height: 0.2142857143rem;
      line-height: 0.18rem;
      text-align: left;
      padding-left: 0.08rem;
      top: 0.12rem;
      border-radius: 50%;
      background-color: rgba(255,255,255,.6);
      color: #666;
    }
    .back{
      background-color: #E7E7E7
    }
  }
  main{
    flex: 1;
    width: 100%;
    .film_poster{
      height: 210px;
      overflow: hidden;
      img{
        margin-top: -47%;
        width: 100%;
      }
    }
    .film_details{
      width: 100vw;
      min-height: 1.635rem;
      padding: .12rem .15rem;
      display: flex;
      flex-direction: column;
      background-color: white;
      & p:not(:first-child){
        font-size: .14rem;
        margin-top: .04rem;
        width: 100%;
        color: grey;
      }
      p{
        letter-spacing: .01rem;
        span{
          display: inline-block;
          position: relative;
          text-align: center;
          border-radius: 10%;
        }
        .filmType{
          display: inline-block;
          width: .15rem;
          height: .15rem;
          font:normal 600 .1rem/.15rem "楷体";
          top:-.03rem;
          left: .05rem;
          color: white;
          background-color: #9f9f9f;
        }
        .grade{
          font-size: .16rem;
          left: 1.65rem;
          font-weight: 600;
          color: #FF5F16;
        }
      }
      .synopsis{
        margin-top:.12rem!important;
        font-size: .13rem!important;
        text-indent: 2em;
      }
      .fold{
        height: .38rem;
        overflow: hidden;
      }
      .btn_fold{
        color: red;
        text-align: center;
      }
    }
    .film_actors{
      margin-top: .1rem;
      height: 1.92rem;
      background-color: white;
      >p{
        height: .52rem;
        font:normal 600 .16rem/.52rem "楷体" ;
        padding-left: .15rem;
      }
      ul{
        width: 100vw;
        overflow: scroll;
        display: flex;
        padding-right: .1rem;
        &::-webkit-scrollbar{
          height: 0;
        }
        li{
          div{
            width: .85rem;
            height: .85rem;
            overflow: hidden;
            margin-left:.1rem ;
            background-color: #9f9f9f;
            img{
              margin-top: 50%;
              transform: translateY(-50%);
              width: .85rem;
            }
          }
          p{
            width: .85rem;
            text-wrap: nowrap;
            text-align: center;
            overflow: hidden;
            margin-left:.1rem;
            font-size: .13rem;
            color: #191a1b;
            text-overflow: ellipsis;
          }
          span{
            margin-left:.1rem;
            color: #797d82;
            display: block;
            text-align: center;
            font-size: .11rem;
          }
        }
      }
    }
    .photos{
      height: 1.77rem;
      margin: .1rem 0 .6rem;
      position: relative;
      p{
        display: flex;
        padding: .15rem;
        height: .62rem;
        justify-content: space-between;
        background-color: white;
        b{
          font-weight: 200;
          color: #000000;
          font-size: .16rem;
        }
        span{
          font-size: .13rem;
          color:#797d82;
        }
      }
      ol{
        display: flex;
        padding-right: .1rem;
        overflow: scroll;
        background-color: white;
        &::-webkit-scrollbar{
          height: 0;
        }
        li{
          width: 1.5rem;
          height: 1rem;
          margin-left: .1rem;
          div{
            height: 1rem;
            overflow: hidden;
          }
          img{
            margin-top: 32%;
            transform: translateY(-50%);
            width: 1.5rem;
          }
        }
      }
    }
  }
}
footer{
  width: 100%;
  color: rgb(255, 255, 255);
  height: .49rem;
  display: block;
  text-align: center;
  line-height: .49rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #FF5F16;
}
</style>
